
//Inputs
var btnTranslate = document.querySelector("#btn-translate");
var txtInput = document.querySelector("#txt-input");
var outputDiv = document.querySelector("#output");


//calling the funtranslations.com api 
var serverURL = "https://api.funtranslations.com/translate/minion.json"

//getting hands on the server
function getTranslationURL(input) {
return serverURL + "?" + "text=" + input
}

//for error handling
function errorHandler(error) {
console.log("error occured", error);
alert("something wrong with server! try again after some time")
}

//for the operation and callback operation
function clickHandler() {
var inputText = txtInput.value; // taking input

// calling server for processing
fetch(getTranslationURL(inputText))
.then(response => response.json())
.then(json => {
    var translatedText = json.contents.translated;
    outputDiv.innerText = translatedText; // output
   })
.catch(errorHandler)
};

btnTranslate.addEventListener("click", clickHandler)